<template>
  <el-col>
    <el-row>
      <el-button type="primary" icon="el-icon-plus" @click="handleCreateTask">创建任务</el-button>
    </el-row>
    <el-row>
      <el-table :data="tableData" v-loading="loading" border style="width: 100%">
        <el-table-column prop="id" label="作业编号" width="200"></el-table-column>
        <el-table-column prop="name" label="作业名称" width="500"></el-table-column>
        <el-table-column prop="userGroupName" label="用户组名称" width="300"></el-table-column>
        <el-table-column prop="status" label="运行状态" width="200">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status === '运行中' ? 'danger' : 'success'"
              disable-transitions
            >{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              @click="handleExecute(scope.row.id)"
              :disabled="scope.row.status === '运行中' ? true : false"
            >执行作业</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-dialog title="新建搜索词统计作业" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="作业名" :label-width="formLableWidth">
          <el-col :span="7">
            <el-input v-model="form.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="选择用户组" :label-width="formLableWidth">
          <el-select v-model="form.userGroupId" placeholder="下拉选择用户组">
            <el-option
              v-for="item in userGroupOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择时间段" :label-width="formLableWidth">
          <el-row style="margin: 0px">
            <el-date-picker
              style="width: 100%;"
              v-model="form.timeRange"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            ></el-date-picker>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </el-col>
</template>

<script>
import * as request from "@net";

export default {
  methods: {
    handleExecute(id) {
      request.execSearchWordTask(id, ({ msg }) => {
        this.$notify({
          title: "成功",
          message: msg,
          type: "success"
        });
        this.fillTableData();
      });
    },
    handleCreateTask() {
      this.fillData();
      this.dialogFormVisible = true;
    },
    handleSubmit() {
      let searchWordTask = {
        name: this.form.name,
        userGroup: this.form.userGroupId,
        startTime: this.form.timeRange[0],
        endTime: this.form.timeRange[1]
      };
      request.createSearchWordTask(searchWordTask, () => {
        this.$notify({
          title: "成功",
          message: "创建任务成功",
          type: "success"
        });
        this.fillTableData();
        this.dialogFormVisible = false;
      });
    },
    fillData() {
      request.findUserGroup("", ({ data }) => {
        this.userGroupOptions = data.map(userGroup => {
          return {
            label: userGroup.name,
            value: userGroup.id
          };
        });
      });
    },
    fillTableData() {
      this.tableData = [];
      this.loading = true;
      request.getSearchWordTakList(({ data }) => {
        this.tableData = data.map(aSearchWordTask => {
          return {
            id: aSearchWordTask.id,
            name: aSearchWordTask.name,
            userGroupName: aSearchWordTask.userGroup.name,
            status: aSearchWordTask.status,
            timeRange: aSearchWordTask.startTime + "至" + aSearchWordTask.endTime
          };
        });
        this.loading = false;
      });
    }
  },
  data() {
    return {
      loading: true,
      userGroupOptions: [],
      tableData: [],
      dialogFormVisible: false,
      form: {
        name: "",
        type: "",
        userGroupId: "",
        timeRange:[]
      },
      formLableWidth: "150px",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  created(){
    this.fillTableData();
  }
};
</script>

<style scoped>
.el-row {
  margin-top: 10px;
  margin-left: 10px;
}
.el-col {
  border-radius: 4px;
}
</style>


